<template>
    <div class="login">
    <el-form ref="loginForm" :model="form" :rules="rules" label-width="80px" class="login-box" size="mini">
      <h4 class="login-title">注册</h4>
      <el-form-item label="账号" prop="username">
        <el-input type="text" placeholder="请输入账号" v-model="form.username"/>
      </el-form-item>
      <el-form-item label="密码" prop="password">
        <el-input type="password" placeholder="请输入密码" v-model="form.password"/>
      </el-form-item>
      <el-form-item label="确认密码" prop="checkPassword">
        <el-input type="password" placeholder="请再次输入密码" v-model="form.checkPassword"/>
      </el-form-item>
      <el-form-item label="姓名" prop="name">
        <el-input type="text" placeholder="请再次输入密码" v-model="form.name"/>
      </el-form-item>
      <el-form-item label="手机号码" prop="phone">
        <el-input type="text" placeholder="请输入手机号码" v-model="form.phone"/>
      </el-form-item>
      <el-form-item label="工号" prop="usernum">
        <el-input type="text" placeholder="请输入工号" v-model="form.usernum"/>
      </el-form-item>
      <el-form-item label="部门" prop="department">
        <el-select filterable v-model="form.department" placeholder="请选择部门" @change="departmentChange" class="theSelect">
          <el-option
            v-for="item in tableDataetd"
            :key="item.id"
            :label="item.name"
            :value="item.name"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="性别" prop="gender">
        <el-select v-model="form.gender" placeholder="请选择性别" @change="genderChange" class="theSelect">
          <el-option
            v-for="item in optioner"
            :key="item.number"
            :label="item.yes"
            :value="item.yes"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" size="small" @click="toLogin" style="width:57.5%;margin-left:-20%;">返回登录</el-button>
        <el-button type="primary" size="small" @click="onSubmit('loginForm')" style="width:57.5%;margin-left:5%;">注册</el-button>
      </el-form-item>
    </el-form>
    </div>
</template>
<script>
import * as userApi from '@/js/userApi'
let validPassword=(rule,value,callback)=>{
      let reg= /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,20}$/
      if(!reg.test(value)){callback(new Error('密码必须是由6-20位字母+数字组合'))
      }else{
          callback()
      }
  }
let validUsername=(rule,value,callback)=>{
      let reg= /^[0-9a-zA-Z]*$/
      if(!reg.test(value)){callback(new Error('只能输入是字母或者数字,请重新输入'))
      }else{
          callback()
      }
}
  export default {
    name: "Login",
    data() {
      const validateCheckPass = (rule, value, callback) => {
        if(!value) {
            callback(new Error("请输入二次确认密码"))
        }else if(value != this.form.password) {
            callback(new Error("两次输入密码的不一致"))
        }else {
            callback()
        }
      }
      return {
        form: {
          username: '',
          password: '',
          checkPassword: '',
          name: '',
          phone: '',
          usernum: '',
          department: '',
          gender:''
        },
        optioner: [
            {
            number: 1,
            yes: "男",
            },
            {
            number: 0,
            yes: "女",
            },
        ],
        tableDataetd: [],
        rules: {
          username: [
            {required: true, message: '账号不可为空', trigger: 'blur'},
            { validator: validUsername, trigger: 'blur' }
          ],
          password: [
            {required: true, message: '密码不可为空', trigger: 'blur'},
            { validator: validPassword, trigger: 'blur' }
          ],
          checkPassword: [
            {required: true, validator: validateCheckPass, trigger:'blur'}
          ],
          name: [
            {required: true, message: '姓名不可为空', trigger: 'blur'}
          ],
          phone: [
            {required: true, message: '手机号码不可为空', trigger: 'blur'}
          ],
          usernum: [
            {required: true, message: '工号不可为空', trigger: 'blur'}
          ],
          department: [
            {required: true, message: '部门不可为空', trigger: 'change'}
          ],
          gender: [
            {required: true, message: '性别不可为空', trigger: 'change'}
          ],
        },
        dialogVisible: false
      }
    },
    methods: {
      toLogin(){
        this.$router.push('/login')
      },
      onSubmit(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            userApi.register({
          username: this.form.username,
          password: this.form.password,
          userInfo:{
            userNum: this.form.usernum,
            name: this.form.name,
            gender: this.form.gender,
            department: this.form.department,
            phone: this.form.phone
          }
          }).then(res => {
            // console.log('register success : ',res)
            if(res.status === 'SUCCESS'){
              this.$message({
                type: 'success',
                message: res.message
              })
              this.$router.push({
                  name: 'login',
                  params: {
                    username:this.form.username,
                    password:this.form.password
                  }
              })
            }else{
              this.$message({
                type: 'error',
                message: res.message
              })
            }

          })
        }
        else{
          return false
        }
      })
    },
    departmentChange(){

    },
    genderChange(){
        
    }
  },
  mounted(){
    userApi.findDepartmentAll({pageNum:1,pageSize:9999}).then(res=>{
      this.tableDataetd=res.data.content
    })
  }
  }
</script>

<style lang="scss" scoped>
  .login{
      width: 100%;
      height:100vh;
      background-color: white;
      display: flex;
      justify-content: center;
      align-items: center;
  }
  .login-box {
    border: 1px solid #DCDFE6;
    width: 350px;
    padding: 35px 35px 15px 15px;
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    box-shadow: 0 0 25px #909399;
  }
  .login-title {
    text-align: center;
    margin: 0 auto 20px auto;
    color: #303133;
  }
  .theSelect {
    width: 100%;
  }
</style>